<template>
  <a-card :bordered="false" :class="{'abcdefg':true}">
    <div class="no-print" style="text-align: right">
      <a-button v-print="printContent" ghost type="primary" @click="handleCurrentChange(1)" >打印</a-button>
    </div>
    <section ref="print" id="printMe" class="abcdefg">
      <div  :key="index" v-for="(record, index) in model" class="name">
        <div style="text-align: center">
          <span style="font-size: 24px;font-weight: 800;margin-top: 50px;display: inline-block;height: 100px; line-height: 100px;">森池百货-送货单</span>
        </div>
       <!-- <div style="text-align: left;display: flex;justify-content: space-between">
          <p style="font-size: 16px;font-weight: 600;text-align: left;margin-left: 5%">订单号:   {{record.orderNo}}</p>
        </div>-->
        <!--签字-->
        <div class="sign" style="text-align: center;height: inherit">
          <a-col :span="24" >
          <span>
            订单号:
          </span>
            <a-input style="width: 30%" v-model="record.orderNo"/>
            <span style="margin-left: 12.5%">打印时间:</span>
            <a-input style="width: 30%" v-model="record.printTime"/>
          </a-col>
          <a-col :span="24">
          <span>
            收货人:
          </span>
            <a-input style="width: 30%" v-model="record.name"/>
            <span style="margin-left: 12.5%">联系电话:</span>
            <a-input style="width: 30%" v-model="record.phone"/>
          </a-col>

          <a-col :span="24" style="margin-top: 20px">
            <span>地址:</span>
            <a-textarea style="width: 80%" v-model="record.address"/>
          </a-col>
          <a-col :span="24" style="margin-top: 20px;margin-left: 4%;text-align: left">
            <span>商品明细:</span>
            <br>
            <!-- <a-input style="width: 80%" v-model="printReason"/>-->
            <table style="margin-left: 12.5%;width: 80%">
              <th>名称</th>
              <th>数量</th>
              <tr :key="index2" v-for="(records, index2) in record.detailList">
                <td style="margin-left: 12.5%">{{records.goodName}}</td>
                <td style="margin-left: 12.5%">{{records.num}}</td>
              </tr>
            </table>
          </a-col>
          <a-col :span="24" style="margin-top: 20px">
            <span>备注:</span>
            <a-textarea style="width: 80%" v-model="record.remark"/>
          </a-col>
        </div>
      </div>

    </section>
  </a-card>
  <!--</page-layout>-->
</template>
<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    components: {
    },
    name: 'Printgzsld',
    props:{
      reBizCode:{
        type: String,
        default: ''
      },
      orderId:{
        type: String,
        default: '',
        required:true
      },
    },
    data(){
      return {
        model:{

        },
        model2:[],
        getDataUrl:"/shopOrder/getData",
        savePrint:"/shopOrder/savePrint",
        columns: [{
        }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        printContent: {
          id: "printMe", // 打印的区域
          preview: false, // 预览工具是否启用
          previewTitle: '这是预览标题', // 预览页面的标题
          popTitle: '', // 打印页面的页眉
          extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
          clickMounted(vue){
            console.log('点击了打印按钮');
            vue.printContent.popTitle = " " // 动态设置页眉
          },
          previewBeforeOpenCallback() {
            console.log('正在加载预览窗口')
          },
          previewOpenCallback() {
            console.log('已经加载完预览窗口')
          },
          beforeOpenCallback(vue) {
            vue.printLoading = true
            console.log('打开之前')
          },
          openCallback(vue) {
            vue.printLoading = false
            console.log('执行了打印')
          },
          closeCallback(vue) {
          },
          onPrintDialogClose(vue) {
            console.log('111111111111')
          },
        },
        previewVisible: false,
        url:{
          loadApplicant:"/sps/register/loadApplicants",
          loadRegisterFiles:"/sps/register/getRegisterFilesConfig",
        }
      }
    },
    created() {
      console.log(this.orderId)
      this.loadData();
    },
    methods: {
     /* beforePrint() {
        alert('确认');
      },
      afterPrint() {
        alert('取消');
        window.print();
        window.onbeforeprint = beforePrint,
        window.onafterprint = afterPrint,
      },*/

      handleCurrentChange(){
        httpAction(this.savePrint, {orderId:this.orderId,printTime:this.printTime},'post').then((res) => {
          if (res.success) {

          } else {
          }
        }).finally(() => {

        })

      },


      loadData(){
        httpAction(this.getDataUrl, {orderId:this.orderId},'post').then((res) => {
          if (res.success) {
            this.model = Object.assign({}, res.result);
            this.printTime =this.model[0].printTime;
          } else {
            this.$confirm({
              title: "确认操作",
              content: res.message,
              onOk: function () {

              }
            });
          }
        }).finally(() => {

        })

      },
      getDate(){
        // 当前时间
      },
      handleCancel () {
        this.previewVisible = false
      },
      handlePreview (file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      handleChange ({ fileList }) {
        this.fileList = fileList
      },
    }
  }
</script>
<style scoped lang="less">
  .name{
    span:nth-child(1){
      margin-top: 0!important;
    }
  }
  /*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
  * {
    color: #000000!important;
    -webkit-tap-highlight-color: #000000!important;
  }
  /*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

  .abcdefg .ant-card-body{
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 1%;
    border:0px solid black;
    min-width: 800px;
    color:#000000!important;
  }
  .explain{
    text-align: left;
    margin-left: 50px;
    color:#000000!important;
  }
  .explain .ant-input,.sign .ant-input{
    font-weight:bolder;
    text-align:center;
    border-left-width:0px!important;
    border-top-width:0px!important;
    border-right-width:0px!important;
  }
  .explain div{
    margin-bottom: 10px;
  }
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>